<template>
    <div class="big">
        <div class="topdiv">
            <button class="topl" > &lt; </button>
            求职偏好
            <button class="toprtext">保存</button>
        </div>
        <div class="tiao" @click="drawer1 = true">
            偏好区域
            <button class="topr1"><span :v-model="text1">{{ text1 }}</span> &nbsp; > </button>
        </div>
        <div class="tiao" @click="drawer2 = true">
            空闲时间
            <button class="topr2"><span :v-model="text2">{{ text2 }}</span> &nbsp; > </button>
        </div>
        <div class="tiao" @click="drawer3 = true" open-delay="0" close-delay="0">
            求职意向
            <button class="topr3"><span :v-model="text4">{{ text4 }}</span> &nbsp; > </button>
        </div>

        <div class="pianhaodrawer">
            <el-drawer v-model="drawer1" :direction="direction" :with-header="false">
                <div class="drawerTop"><button @click="cancelClick1" style="float: left;">取消</button><button
                        style="float: right;" @click="confrim1">完成</button></div>
                <div style="margin-top: 7vh;">
                    <div class="drawItem" v-for="item in drawer1Data" @click="drawer1text(item.county)">{{
                        item.county
                    }}</div>
                </div>

            </el-drawer>
        </div>
        <div>
            <div class="pianhaodrawer">
                <el-drawer v-model="drawer2" :direction="direction" :with-header="false">
                    <div class="drawerTop"><button @click="cancelClick2" style="float: left;">取消</button><button
                            style="float: right;" @click="confrim2">完成</button></div>
                    <div style="margin-top: 7vh;">
                        <div class="drawItem" v-for="item in drawer2Data" @click="drawer2text(item.date)">{{
                            item.date
                        }}</div>
                    </div>
                </el-drawer>
            </div>
        </div>
        <div>
            <div class="pianhaodrawer">
                <el-drawer v-model="drawer3" :direction="direction" :with-header="false">
                    <div class="drawerTop"><button @click="cancelClick3" style="float: left;">取消</button>
                        最多选择三项
                        <button style="float: right;" @click="confrim3">完成</button>
                    </div>
                    <div style="margin-top: 7vh;">
                        <div class="drawItem3" v-for="item in drawer3Data" @click="drawer3text(item)">{{
                            item.job
                        }}<input class="checkboxr" type="checkbox" :checked="item.checked" /></div>
                    </div>
                </el-drawer>
            </div>
        </div>

</div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';

const drawer1 = ref(false)
const drawer2 = ref(false)
const drawer3 = ref(false)
const direction = ref('btt')

let text1: any = ref('选择后按关注区域推荐职位')
let text2: any = ref('选择后按空闲时间推荐职位')
let text4: any = ref('选择后按求职意向推荐职位')

let topr1Color: any = ref('#ededed')
let topr2Color: any = ref('#ededed')
let topr3Color: any = ref('#ededed')

function cancelClick1() {
    drawer1.value = false;
    text1 = ref('');
}

function cancelClick2() {
    drawer2.value = false;
    text2 = ref('');
}
function cancelClick3() {
    drawer3.value = false;
    text4 = ref('');
    drawer3Data.forEach(item => {
        item.checked = false;
    })
}

let confrim1 = () => {
    drawer1.value = false;
}
let confrim2 = () => {
    drawer2.value = false;
}
let confrim3 = () => {
    drawer3.value = false;
}

let drawer1text = (text: any) => {
    if (text == '全北京') {
        text1 = '北京';
    } else {
        text1 = '北京，' + text;
    }
    drawer1.value = false;
    drawer1.value = true;
}
let drawer2text = (text: any) => {
    text2 = text;
    drawer2.value = false;
    drawer2.value = true;
}
let drawer3text = (item: any) => {
    let text3: any = ref([])
    item.checked = !item.checked
    drawer3Data.forEach(item => {
        if (item.checked == true) {
            text3.value.push(item.job);
        }
    })
    if (text3.value.length <= 3) {
        text4 = '';
        text3.value.forEach((item: string) => {
            if (text4) {
                text4 = text4 + ', ' + item;
            } else {
                text4 = item
            }
        })
    } else {
        item.checked = !item.checked
    }

    drawer3.value = false;
    setTimeout(() => {
        drawer3.value = true;
    }, 1)

}

let drawer1Data = [
    {
        "id": "1001",
        "county": "全北京"
    },
    {
        "id": "1002",
        "county": "海淀"
    },
    {
        "id": "1003",
        "county": "朝阳"
    },
    {
        "id": "1004",
        "county": "东城"
    },
    {
        "id": "1005",
        "county": "西城"
    },
    {
        "id": "1006",
        "county": "崇文"
    },
    {
        "id": "1007",
        "county": "宣武"
    },
    {
        "id": "1008",
        "county": "丰台"
    },
    {
        "id": "1009",
        "county": "石景山"
    },
    {
        "id": "1010",
        "county": "房山"
    },
    {
        "id": "1010",
        "county": "房山"
    },
    {
        "id": "1011",
        "county": "大兴"
    },
    {
        "id": "1012",
        "county": "通州"
    },
    {
        "id": "1013",
        "county": "顺义"
    },
    {
        "id": "1014",
        "county": "昌平"
    },
    {
        "id": "1015",
        "county": "密云"
    },
    {
        "id": "1016",
        "county": "怀柔"
    },
    {
        "id": "1017",
        "county": "延庆"
    },
    {
        "id": "1018",
        "county": "平谷"
    },
    {
        "id": "1019",
        "county": "门头沟"
    },
    {
        "id": "1020",
        "county": "燕郊"
    },
    {
        "id": "1021",
        "county": "北京周边"
    }
]

let drawer2Data = [
    {
        "id": "1001",
        "date": "不限",
    },
    {
        "id": "1002",
        "date": "仅周末"
    },
    {
        "id": "1003",
        "date": "仅工作日"
    },
    {
        "id": "1004",
        "date": "寒暑假"
    },
    {
        "id": "1005",
        "date": "节假日"
    },
]
let drawer3Data = [
    {
        "id": "1001",
        "job": "搬运工",
        "checked": false
    },
    {
        "id": "1002",
        "job": "仓库管理员",
        "checked": false
    },
    {
        "id": "1003",
        "job": "客服经理",
        "checked": false
    },
    {
        "id": "1004",
        "job": "在线客服",
        "checked": false
    },
    {
        "id": "1005",
        "job": "销售支持",
        "checked": false
    },
    {
        "id": "1006",
        "job": "销售经理",
        "checked": false
    },
    {
        "id": "1007",
        "job": "网络销售",
        "checked": false
    },
    {
        "id": "1008",
        "job": "电话销售",
        "checked": false
    },
    {
        "id": "1009",
        "job": "保险内勤",
        "checked": false
    },
    {
        "id": "1010",
        "job": "英语翻译",
        "checked": false
    },
    {
        "id": "1011",
        "job": "小语种翻译",
        "checked": false
    },
    {
        "id": "1012",
        "job": "招生顾问",
        "checked": false
    },
]

</script>

<style lang='scss' scoped>
.big {
    height: 100vh;
    width: 100vw;
    background-color: #f1f1f1;
}

.topl {
    color: gray;
    font-size: 22px;
    line-height: 7vh;
    float: left;
    height: 7vh;
    border: none;
    background-color: white;
    margin-left: 5px;
}

.topdiv {
    height: 7vh;
    width: 100%;
    background-color: white;
    text-align: center;
    font-weight: 600;
    line-height: 7vh;
    font-size: 18px;
    margin-bottom: 10px;
}

.toprtext {
    font-size: 15px;
    line-height: 7vh;
    float: right;
    height: 7vh;
    border: none;
    background-color: white;
    margin-right: 10px;
}

.tiao {
    color: grey;
    background-color: white;
    width: 100vw;
    height: 6vh;
    padding-left: 10px;
    line-height: 6vh;
    margin-bottom: 2px;
}

.topr {
    // color: #ededed;
    font-size: 14px;
    line-height: 6vh;
    float: right;
    height: 6vh;
    border: none;
    background-color: white;
    margin-right: 5px;
}

.topr1 {
    @extend .topr;
    color: v-bind(topr1Color);
}

.topr2 {
    @extend .topr;
    color: v-bind(topr2Color);
}

.topr3 {
    @extend .topr;
    color: v-bind(topr3Color);
}

.el-drawer {
    --el-drawer-padding-primary: var(--el-dialog-padding-primary, 0px) !important;
}

.drawerTop {
    background-color: #f1f1f1;
    width: 100vw;
    height: 7vh;
    line-height: 7vh;
    position: fixed;
    z-index: 10;
    text-align: center;
}

.drawerTop button {
    height: 7vh;
    width: 60px;
    border: none;
    font-size: 15px;
    background: none;
}

.drawItem {
    color: gray;
    text-align: center;
    height: 6vh;
    line-height: 6vh;
}

.checkboxr {
    float: right;
    margin-right: 10px;
    margin-top: 2vh;
}

.drawItem3 {
    @extend .drawItem;
    text-align: left;
    text-indent: 10px;
}
</style>
<style>
.pianhaodrawer .el-drawer {
    --el-drawer-padding-primary: var(--el-dialog-padding-primary, 0px);
}
</style>
